﻿<%@ Page Title="" Language="C#" MasterPageFile="~/GetQuote.Master" AutoEventWireup="true" CodeBehind="ShadesDetail.aspx.cs" Inherits="GetQuote.Web.ShadesDetail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="Style_Library/fuelUX/css/fuelux.css" rel="stylesheet" type="text/css" />
<script src="Style_Library/fuelUX/js/loader.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        for (var i = 30; i < 200; i++) {
            $("#ddlWidth").append("<option value='" + i + "'>" + i + "</option>");
            $("#ddlLength").append("<option value='" + i + "'>" + i + "</option>");
        }
        $("#ddlWidth").val("36");
        $("#ddlLength").val("60");

        $('#quantityWrapper').spinner();
        $('#quantitySpin').blur(function () {
            if ($(this).val() == "") {
                $(this).val("1");
            }
        });
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table  cellpadding="5" id="productDetail">
        <tr>
            <td class="tdProductImage">
                <img src="Images/Products/Deluxe_Wood_Blinds.jpg" class="img-polaroid" alt=""/>
            </td>
            <td class="tdProductContent">
                <table class="form-inline">
                    <tr>
                        <td>
                            <select style=" min-width:405px;">
	                            <option value="3">Woven Wood - Roman Fold Shade - Series 100</option>
	                            <option value="4">Roller Shades - Phifer Style: 3000 (14%)</option>
                                <option value="1">Sheerweave Solar Shades</option>
                            </select>
                            <%--<span class="product-name">Sheerweave Solar Shades</span>--%>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="manufacturer-label">Manufacturer: </span><span class="manufacturer-name">Hunter Douglas</span></td>
                    </tr>
                    <tr>
                        <td>
                            <table style=" margin:2px 0;">
                                <tr>
                                    <td>
                                        <strong>Room Location: </strong>
                                        <select>
                                            <option value="0">Select location</option>
	                                        <option value="1">Bath</option>
	                                        <option value="2">Bed</option>
	                                        <option value="3">Family</option>
	                                        <option value="4">Dining</option>
	                                        <option value="5">Home Offices</option>
	                                        <option value="6">Kitchens</option>
	                                        <option value="7">Living</option>
	                                        <option value="9">M. Bath</option>
	                                        <option value="10">Breakfast</option>
	                                        <option value="11">Sink</option>
	                                        <option value="12">M.Bed</option>
	                                        <option value="13">F.Bed</option>
	                                        <option value="14">B.Bed</option>
	                                        <option value="15">C.Bed</option>
	                                        <option value="17">Bed #1</option>
	                                        <option value="18">Bed #2</option>
                                        </select>        
                                    </td>
                                    <td style="width: 120px;text-align: right;"><strong>Quantity: </strong></td>
                                    <td class="fuelux" style=" width:140px">
                                        <div id="quantityWrapper" class="spinner" style="float: left;height: 30px;">
                                            <input type="text" class="spinner-input" id="quantitySpin" />
					                            <div class="spinner-buttons	 btn-group btn-group-vertical">
						                            <button type="button" class="btn spinner-up">
							                            <i class="icon-chevron-up"></i>
						                            </button>
						                            <button type="button" class="btn spinner-down">
							                            <i class="icon-chevron-down"></i>
						                            </button>
					                            </div>
				                        </div>
                                    </td> 
                                    <td>
                                        <strong>Width:</strong>
                                        <select id="ddlWidth"></select>
                                        <select id="ddlWidthEven">
                                            <option value="0"></option>
                                            <option value="0.125">1/8</option>
                                            <option value="0.25">1/4</option>
                                            <option value="0.375">3/8</option>
                                            <option value="0.5">1/2</option>
                                            <option value="0.625">5/8</option>
                                            <option value="0.75">3/4</option>
                                            <option value="0.875">7/8</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style=" text-align:right;">
                            <table style=" margin:2px 0;">
                                <tr>
                                    <td>
                                        <strong style="width: 100px;margin-left: 55px;">Length:</strong>
                                        <select id="ddlLength"></select>
                                        <select id="ddlLengthEven">
                                            <option value="0"></option>
                                            <option value="0.125">1/8</option>
                                            <option value="0.25">1/4</option>
                                            <option value="0.375">3/8</option>
                                            <option value="0.5">1/2</option>
                                            <option value="0.625">5/8</option>
                                            <option value="0.75">3/4</option>
                                            <option value="0.875">7/8</option>
                                        </select> 
                                    </td>
                                    <td style=" width:125px;"><strong>Mount:</strong></td>
                                    <td>
                                        <label class="checkbox">
                                            <input type="checkbox" name="ckOutside" id="ckOutside" /> Outside
                                        </label>
                                    </td>
                                    <td style="width:120px;">
                                        <strong>Control:</strong>
                                    </td>
                                    <td>
                                        <label class="radio">
                                            <input type="radio"  checked="checked" name="control"/>
                                            Left
                                        </label>
                                    </td>
                                    <td>
                                        <label class="radio">
                                            <input type="radio" name="control" />
                                            Right
                                        </label> 
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table style=" margin:2px 0;">
                                <tr>
                                    <td>
                                        <strong style=" margin-left:41px;">Valances:</strong>
                                    </td>
                                    <td>
                                        <label class="radio">
                                            <input type="radio"  id="radio3" checked="checked" name="valances"/>
                                            Inside
                                        </label>
                                    </td>
                                    <td>
                                        <label class="radio">
                                            <input type="radio" id="radio4" name="valances" />
                                            Outside
                                        </label> 
                                    </td>
                                    <td>
                                        <label class="checkbox" style=" margin-right:25px; margin-left:135px;">
                                            <input type="checkbox" id="ckHoldDown"/>
                                            Hold down &amp; Spacer
                                        </label>
                                    </td>
                                    <td>
                                        <label class="checkbox" style=" margin-right:27px;">
                                            <input type="checkbox" id="ckTwoOnOne"/>
                                            2 on 1
                                        </label>
                                    </td>
                                    <td>
                                        <label class="checkbox">
                                            <input type="checkbox" id="ckThreeOnOne"/>
                                            3 on 1
                                        </label> 
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table style=" margin:2px 0;">
                                <tr>
                                    
                                    <td>
                                        <strong style=" margin-left:322px;">Color:</strong>
                                        <input id="txtColor" type="text" style="width:110px;" class="inputtext-small" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Your Note:</strong><br />
                            <textarea rows="2" cols="20" style=" width:98%; height:45px"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="box-wrapper" style="padding:10px; margin:5px 0;">
                                <table style="width:100%">
                                    <tr>
                                        <td style="vertical-align:top;">
                                            <table>
                                                <tr>
                                                    <td style="width:188px"><strong>Discount Point:</strong></td>
                                                    <td><input id="Text1" type="text" class="span1 inputtext-small" value="0.5" /></td>
                                                </tr>
                                                <tr>
                                                    <td><strong >Markup by Discount Point</strong>:</td>
                                                    <td><input id="Text2" type="text" class="span1 inputtext-small" value="0.75" /></td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td>
                                            <table>
                                                <tr>
                                                    <td style=" width:135px"><strong>Dealer Cost:</strong></td>
                                                    <td><input id="Text3" type="text" class="span1 inputtext-small" value="150" /></td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Markup by Margin</strong>:</td>
                                                    <td><input id="Text4" type="text" class="span1 inputtext-small" value="0.5" /></td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td style=" vertical-align:middle;">
                                            <button type="button" class="btn btn-small">Save Discount</button>
                                        </td>
                                    </tr>
                                    
                                </table>
                            </div>
                        </td>
                    </tr>
                    
                    <tr>
                        <td class="text-right">
                            <button type="button" id="btSubmit" class="btn btn-primary"><i class="icon-share-alt icon-white"></i> <strong>Add to Cart</strong></button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div class="BodyWidth">
        <table id="orderGrid" class="BodyWidth" cellspacing="0px" style="border:solid 1px #999999; width:100%">            
            <tbody><tr>
                <td rowspan="2" id="idTD" align="center" style="display:none;">Id</td>                
                <td rowspan="2" id="numberTD" align="center" style="width:20px;" class="BackgroundBorderRightCell"><strong>#</strong></td>
                <td rowspan="2" id="nameTD" align="center" style="display:none;" class="BackgroundBorderRightCell"><strong>Name</strong></td>
                <td rowspan="2" id="quantityTD" align="center" style="width:20px;" class="BackgroundBorderRightCell"><strong>QTY</strong></td>
                <td rowspan="2" id="roomLcationTD" align="center" style="width:80px;" class="BackgroundBorderRightCell"><strong>Room</strong></td>
                <td rowspan="2" id="widthTD" align="center" style="width:40px;" class="BackgroundBorderRightCell"><strong>Width</strong></td>
                <td rowspan="2" id="heightTD" align="center" style="width:40px;" class="BackgroundBorderRightCell"><strong>Length</strong></td>                    
                <td colspan="2" id="mountPositionTD" align="center" style="width:30px;" class="BackgroundBorderRightCell"><strong>Mount</strong></td>           
                <td colspan="2" id="controlTD" align="center" style="width:60px;" class="BackgroundBorderRightCell"><strong>Control</strong></td>
                <td rowspan="2" id="holddownTD" align="center" style="width:15px;" class="BackgroundBorderRightCell"><strong>H D &amp; SP</strong></td>
                <td rowspan="2" id="TwoInOneTD" align="center" style="width:15px;" class="BackgroundBorderRightCell"><strong>2 on 1</strong></td>                    
                <td rowspan="2" id="ThreeInOneTD" align="center" style="width:15px;" class="BackgroundBorderRightCell"><strong>3 on 1</strong></td>                    
                <td rowspan="2" id="valancesTD" align="center" style="width:30px;" class="BackgroundBorderRightCell"><strong>Valances</strong></td>
                <td rowspan="2" id="colorTD" align="center" style="width:70px;" class="BackgroundBorderRightCell"><strong>Color</strong></td>
                <td rowspan="2" id="priceTD" align="center" style="width:60px;" class="BackgroundBorderRightCell"><strong>Unit Price</strong></td>
                <td rowspan="2" id="totalTD" align="center" style="width:60px;" class="BackgroundBorderRightCell"><strong>Total Price</strong></td>                
                <td rowspan="2" id="noteTD" align="center" class="BackgroundBorderRightCell"><strong>Note</strong></td>
                <td rowspan="2" id="productIdTD" align="center" style="display:none;">ProductId</td>
                <td rowspan="2" id="roomLocationId" align="center" style="display:none;">RoomLocationId</td>                
                <td rowspan="2" id="fullNoteTD" align="center" style="display:none;">Full Note</td>
                <td rowspan="2" id="editTD" align="center" class="BackgroundBorderRightCell" style="width:120px"></td>                
            </tr>
            <tr>
                <td id="mountInsideTD" align="center" style="width:15px;" class="BackgroundBorderTopRightCell"><strong>IM</strong></td>
                <td id="mountOutsideTD" align="center" style="width:15px;" class="BackgroundBorderTopRightCell"><strong>OM</strong></td>                
                <td id="leftControlTD" align="center" style="width:30px;" class="BackgroundBorderTopRightCell"><strong>Left</strong></td>
                <td id="rightControlTD" align="center" style="width:30px;" class="BackgroundBorderTopRightCell"><strong>Right</strong></td>
            </tr>            
        <tr id="noDataRow"><td style="border-top: 1px solid rgb(153, 153, 153);" colspan="23" align="center">No data to display</td></tr></tbody></table>        
    </div>
</asp:Content>
